<script lang="ts" setup>
import VueOfficeExcel from '@vue-office/excel'
import '@vue-office/excel/lib/index.css'

const props = defineProps({
  url: String,
  visible: {
    type: Boolean,
    default: false
  },
  remove: {
    type: Function, //传入createApp中移除节点的方法
    default: null
  }
})

const show = ref(props.visible)
// 监听显示的消失，需要移除dom
watch(
  () => show.value,
  (val) => {
    if (!val) {
      props.remove()
    }
  }
)

const renderedHandler = () => {
  console.log('excel渲染成功')
}
const errorHandler = () => {
  console.warn('excel渲染失败')
}
</script>

<template>
  <el-dialog v-model="show" title="Excel预览" width="1000px" top="50px">
    <vue-office-excel
      :src="url"
      style="height: 80vh"
      @rendered="renderedHandler"
      @error="errorHandler"
    />
  </el-dialog>
</template>
